<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/lib/bootstrap.min.css"/>
		<script src="js/lib/jquery-1.11.0.js"></script>
		<script src="js/lib/bootstrap.min.js"></script>
		<script src="js/lib/vue.min.js"></script>
		<script src="js/lib/vue-resource.js"></script>
		<script src="js/base.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style>
		body{
	 		font-size:12px;
	 	}
		table td:nth-child(even) {
			
		}
		table tr:nth-child(1) {
			background-color:#f1f1f1;
		}
		input{
			width:280px;
		}
		span{
			width:20px;color:red;display:inline-block;text-align:center;
		}
		#sho{
			width:300px;
			height:50px;
			background:#d9534f;
			opacity:0.8;
			border-radius:8px;
			color:#fff;
			text-align: center;
			font-size:30px;
			position: absolute;
			top:0px;
			left:550px;
			display:none;
		}
	</style>
	<body>
		<div class="" id="box">
				<div class="">
		<!--加载动画-->
		<div class="wrapper">
            <div id="loader-wrapper">
                <div id="loader"></div>
            </div>
        </div>
			<div style="padding:15px 5px 0px 5px;border:3px solid #ccc;margin-bottom:15px">
			<table class="table table-hover">				
				<tbody>
					<tr>
						<th colspan="12" style="font-size:26px;color:#337ab7">添加业绩播报数据:&nbsp;&nbsp;&nbsp;&nbsp;</th>
					</tr>
					<tr>						
						<td colspan="12">
							<input id="name" v-model="brandId" placeholder="品牌" class="form-control" disabled="disabled" type="hidden" style="width:280px;" />							
						</td>	
					</tr>					
					<tr>						
						<td colspan="12">
							<input id="name" v-model="id" placeholder="请输入ID" class="form-control" type="hidden" style="width:280px;" />							
						</td>	
					</tr>
					<tr>
						<td>姓名：</td>
						<td colspan="12">
							<input id="money" v-model="username" placeholder="请输入姓名" class="form-control" type="text" style="width:280px;" />			
						</td>	
					</tr>
					<tr>
						<td>积分：</td>
						<td colspan="12">
							<input id="discount" v-model="cion" placeholder="输入积分" class="form-control" type="text" style="width:280px;" />			
						</td>	
					</tr>
					<tr>
						<td>收益：</td>
						<td colspan="12">
							<input type="text" v-model="earnings" class="form-control" placeholder="收益" style="width:280px">						
						</td>	
					</tr>
					<tr>
						<td colspan="12">
							<input id="btn" type="btn" v-on:click="add()" value="新增" class="btn btn-danger" style="display:block;margin:0 210px;"/>
						</td>
					</tr>					
				</tbody>
			</table>					
			</div>
			</div>
						
			
			<!-- <div class="bor">
				<table class="table table-hover">
					<caption class="h4 text-info">新增产品</caption>
					<tr>
						<th class="text-center">序号</th>
						<th class="text-center">品牌</th>
						<th class="text-center">id</th>
						<th class="text-center">用户名</th>
						<th class="text-center">积分</th>
						<th class="text-center">金额</th>
						<th class="text-center">操作</th>
					</tr>
					<tr v-for="(item,index) in mydata">
						<td class="text-center">{{index+1}}</td>
						<td class="text-center">{{item.brandId}}</td>
						<td class="text-center">{{item.id}}</td>
						<td class="text-center">{{item.username}}</td>
						<td class="text-center">{{item.cion}}</td>
						<td class="text-center">{{item.earnings}}</td>
						<td class="text-center">
							<button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#dle" v-on:click="nowIndex=index">删除</button>
						</td>
					</tr>
					<tr class="text-center" v-show="mydata.length!=0">
						<td colspan="8">
							<button class="btn btn-danger" data-toggle="modal" data-target="#dle"  v-on:click="nowIndex=='all'">删除全部</button>
						</td>
					</tr>
					<tr v-show="mydata.length==0">
						<td colspan="8" class="text-center text-muted">
							暂无数据...
						</td>
					</tr>
				</table>
			   </div> -->
			   <div class="bor">
				<table class="table table-hover">
					<caption class="h4 text-info">已有数据</caption>
					<tr>
						<th class="text-center">序号</th>
						<th class="text-center">id</th>
						<th class="text-center">用户名</th>
						<th class="text-center">积分</th>
						<th class="text-center">金额</th>
						<th class="text-center">操作</th>
					</tr>
					<tr v-for="(item,index) in list">
						<td class="text-center">{{index+1}}</td>
						<td class="text-center">{{item.id}}</td>
						<td class="text-center">{{item.username}}</td>
						<td class="text-center">{{item.cion}}</td>
						<td class="text-center">{{item.earnings}}</td>
						<td class="text-center">
							<button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#dle" v-on:click="xugai(item)">修改</button>
						</td>
					</tr>
					<tr class="text-center" v-show="mydata.length!=0">
						<!--<td colspan="8">
							<button class="btn btn-danger" data-toggle="modal" data-target="#dle"  v-on:click="nowIndex=='all'">删除全部</button>
						</td>-->
					</tr>
					<tr v-show="list.length==0">
						<td colspan="8" class="text-center text-muted">
							暂无数据...
						</td>
					</tr>
				</table>
			   </div>
			   		
				 <div class="modal fade" role="dialog" id="dle">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button class="close" data-dismiss="modal">
									<span class="">&times;</span>
								</button>
								<h4 class="modal-title">修改用户信息：</h4>
							</div>
							<div class="modal-body text-right">
								<input type="hidden" id="a" class="form-control" style="width:90%;margin:15px auto">
								<input type="hidden" id="b" class="form-control" style="width:90%;margin:15px auto">
								<label for="name" style="float:left">姓名：</label>	
								<input type="text" id="c" class="form-control" style="width:90%;float:left;margin:15px auto">
								<label for="name" style="float:left">积分：</label>
								<input type="text" id="d" class="form-control" style="width:90%;float:left;margin:15px auto">
								<label for="name" style="float:left">金额：</label>
								<input type="text" id="e" class="form-control" style="width:90%;float:left;margin:15px auto">
								<button class="btn btn-primary" data-dismiss="modal" v-on:click="que()">确认</button>
								<button class="btn btn-danger" data-dismiss="modal">取消</button>
							</div>
						</div>
					</div>
				</div> 
			
		</div>
	</body>
	<script>
	$(function(){
		var brandid = sessionStorage.getItem(key=3);
		var brandname = sessionStorage.getItem(key=100);
		/*console.log(brandname);
		$('#op').val(brandid);
		$('#op').text(brandname);*/
		var vm = new Vue({
			el:"#box",
			data:{
				mydata:[],
				brandId:brandid,
				id:"",
				username:"",
				cion:"",
				earnings:"",
				list:[],
				nowIndex:-100
			},
			created:function(){
				var data = {brand_id:brandid}
				this.$http.post(window.baseUrl+"user/coin/ranking/query",data,{emulateJSON:true}).then(
								   function (res){
								    console.log("开始调用远程数据...")
								    console.log(res)
								   this.list = res.data.result
								   },function (res) { 
								   	console.log("失败")
								   	
								   } 
								  );
			},			
			methods:{
				add:function(){
					var a = this.brandId 					
					var b = this.id
					var c = this.username
					var d = this.cion
					var e = this.earnings	
					var data = {
        				id:b,
        				brand_id:a,
        				username:c,
        				cion:d,
        				earnings:e
        			};
        			console.log(data);
					this.$http.post(window.baseUrl+"user/coin/ranking/add",data,{emulateJSON:true}).then(
								   function (res){
								    console.log("开始调用远程数据...")
								    console.log(res)
								    location.reload() 
								    alert('新增数据成功!')

								   },function (res) { 
								   	console.log("失败")
								   	alert('新增数据失败！')
								   } 
								  );
					this.mydata.push({
						brandId:this.brandId,
						id:this.id,
						username:this.username,
						cion:this.cion,
						earnings:this.earnings,
						
					});
					this.brand_id="";
					this.grade="";
					this.name="";
					this.money="";
					this.discount="";
					this.rate="";					
				},				
				rest:function(){/*重置输入框*/
					this.brand_id="";
					this.grade="";
					this.name="";
					this.money="";
					this.discount="";
					this.rate=""		
				},
				deleteMsg:function(n){					
							this.mydata.splice(n,1)                
				},
				rest2:function(){
					this.Brand = ""
				    this.Rate =""
				    this.up = ""
				},
				xugai:function(item){
					console.log(item)
					$('#a').val(item.brandId)
					$('#b').val(item.id)
					$('#c').val(item.username)
					$('#d').val(item.cion)
					$('#e').val(item.earnings)
				},
				que:function(){
					var data = {
        				id:$('#b').val(),
        				brand_id:$('#a').val(),
        				username:$('#c').val(),
        				cion:$('#d').val(),
        				earnings:$('#e').val()
        			};
        			console.log(data);
					this.$http.post(window.baseUrl+"user/coin/ranking/add",data,{emulateJSON:true}).then(
								   function (res){
								    console.log("开始调用远程数据...")
								    console.log(res)
								    location.reload() 
								    alert('新增数据成功!')

								   },function (res) { 
								   	console.log("失败")
								   	alert('新增数据失败！')
								   } 
								  );
				}
			}
		})		
	})
</script>
</html>

